Pacote Shiny

André, Bruno, Caio, Gabriel e João Gabriel

Importando pacotes que serão utilizados para elaboração dos códigos

if(!require("pacman")) install.packages("pacman")
pacman::p_load("shiny",
               "tidyverse",
               "babynames",
               "DT",
               "shinythemes",
               "gapminder")

Sumário

Introdução
Estrutura Básica e Geral de um App Shiny
Tipos de Inputs e Outputs
Server
Tipos de Layout e Temas
Interação entre o UI e o Server
Programação Reativa
Usando outros Pacotes Interativos no Shiny

Introdução

Funcionalidade

Shiny é um pacote do R (também disponível para o Python) que permite a criação e publicação de aplicações web sem necessidade de conhecimento prévio em HTML, CSS e JavaScript;

O processo necessário para criação dessas aplicações seja bastante facilitado para usuários do R.

Estrutura Básica de um App Shiny

Em essência, um App Shiny é gerado a partir de dois objetos e a chamada de uma função:

UI (Interface do Usuário)
Server
Função shinyApp(ui, server)

library(shiny)

ui <- fluidPage(
  
)

server <- function(input, output) {
  
}

shinyApp(ui = ui, server = ui)

UI - Interface do Usuário

UI: Definição

O objeto UI é geralmente inicializado pela função fluidPage(), que gerá uma página HTML vazia (também podem ser usadas outras funções para inicializar o UI);

São definidos os tipos de inputs (valores de entrada) e outputs (valores de saída) que o App Shiny apresentará, assim como também a formatação, layout.

ui <- fluidPage(
  titlePanel("Aplicativo Teste"),
  sidebarLayout(
    sidebarPanel(
    ),
    mainPanel(
    )
  )
)

Tipos de Input

Estrutura Comum

Há inúmeros tipos de input disponíveis no Shiny, de todo modo, para que sejam reconhecidos e processados, todos ele precisam de dois parâmetros em comum:

Parâmetro “inputId”: Trata-se de uma string simples e única que será armazenada dentro da lista “input” que é parâmetro da função server(input, output). Desse modo, deve-se utilizar id´s diferentes para referenciar diferentes inputs;
Parâmetro “label”: Trata-se do rótulo/mensagem/instrução que irá aparecer no App Shiny, orientando o usuário sobre como ele deve interagir com as opções de input dadas.

selectInput(inputId = "input1",   # String identificadora do Input
            label = "Selecione uma das opções abaixo.",
            choices = c("A", "B", "C"))

sliderInput(inputId = "input2", # String identificadora do Input
            label = "Selecione um valor de interesse",
            value = 1925,
            min = 1900,
            max = 2000)

Tipos de Input

selectInput()

Dada uma listagem de opções fornecidas, é solicitado ao usuário selecionar uma ou algumas das opções dadas.

selectInput(inputId = 'input1',
            label = 'Escolha uma das opções',
            choices,
            selected = NULL,
            multiple = FALSE,
            ...)

Tipos de Input

checkboxGroupInput()

Semelhante à função selectInput(), mas com uma aparência levemente diferente, e permite selecionar, por padrão, múltiplas opções.

checkboxGroupInput(inputId,
              label,
              choices,
              selected = NULL,
              ...)

Tipos de Input

actionButton()

Pede ao usuário que aperte um botão interativo para que uma certa ação seja realizada no aplicativo.

actionButton(inputId = 'input1',
             label = 'Aperte o Botão para...',
             icon,
             width,
             ...)

Tipos de Input

sliderInput()

A partir de uma barra de rolagem (horizontal), o usuário é informado para selecionar um número dentro de um intervalo de valores estabelecido

sliderInput(inputId,
            label,
            min,
            max,
            value = "valor_default/padrao",
            ...)

Tipos de Input

textInput()

Trata-se de uma função para inserção de inputs em forma de texto.

textInput(inputId,
          label = "Informe seu nome",
          value = "Nome",
          width = NULL,
          placeholder = NULL)

Tipos de Input

passwordInput()

Semelhante a função tenxtInput(), com a diferença que o input informado aparecerá com tarjas (“*”)

passwordInput(input,
              label,
              value,
              width = NULL,
              placeholder = NULL)

Tipos de Input

Além das funções input citadas acima, há várias outras tais como:

dateInput(inputId,
          label,
          value = NULL,
          min = NULL,
          max = NULL,
          format = "yyyy-mm-dd",
          ...)

dateRangeInput(inputId,
               label,
               start = NULL,
               end = NULL,
               min = NULL,
               max = NULL,
               format = "yyyy-mm-dd",
               ...)

numericInput(inputId,
             label,
             value,
             min,
             max,
             step,
             width = NULL)

fileInput(inputId,
          label,
          multiple = FALSE,
          accept = NULL,
          width = NULL,
          ...)

Outputs

Tipos de Output

Os tipos de output são definidos no primeiro objeto, a UI (interface de usuário).
Assim como os inputs, no output também exigem uma identificação - ‘outputId’.

datatable(outputId = "dataframe")   # Define um dataframe como output

htmlOutput(outputId = "html") # Define um documento HTML como output

imageOutput(outputId = 'image') # Define uma imagem como output

plotOutput(outputId = 'plot') # Define um gráfico como output

tableOutput(outputId = 'tabela') # Define uma tabela como output

textOutput(outputId = 'texto') # Define um texto como output
...

Tipos de Output

Feito isso, para que o(s) output(s) definido(s) seja(m) devidamente executado(s) e processado(s) pelo R, faz-se necessário também o uso das render functions (funções de renderização); por exemplo, “renderText({})”;
Estas são definidas no objeto Server.

library(shiny)

ui3 <- fluidPage( 
  textInput("name", "Enter a name:"),
  textOutput("greeting")
)

server3 <- function(input, output, session){
  output$greeting <- renderText({
    paste("Do you prefer dogs or cats,", input$name, "?")
  })
}
  
shinyApp(ui = ui3, server = server3)

Server

Estrutura Básica

No servidor serão executadas todas as operações desejadas:

gráficos, tabelas, mapas, entre diversas outras saídas;

Aqui que os labels do UI receberam suas atribuições.

server <- function(input, output, session) {
  
}

Render Functions

As render functions (funções de renderização) são os objetos que irão efetivamente explicitar os outputs previamente definidos no UI.;

Possibilita a utilização de pacotes fora do pacote Shiny, mas que possuem suporte para renderizar seus resultados, como:

DT, PLotly e Leaflet

server <- function(input, object) {
  output$output_id <- render**function**({
    
    blackbox( input$input_id ) ## Dentro da render function, algum input armazenado dentro do parâmetro
                              # input como "input_id" recebe algum tipo de transformação de maneira a gerar
                              # um output
    })

}

Exemplos de Render Functions

renderPlot()

server <- function(input, output, session){
  output$hist_waiting <- renderPlot({
    hist(faithful$waiting,
         breaks = input$nb_bins,
         col = 'steelblue')
  })
}

Exemplos de Render Functions

renderPlot() + pacote plotly

server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
    babynames %>% 
      filter(name == input$name) %>% 
      plotly::plot_ly(, x = ~year, y = ~n, type = "bar")
  }
  output$plot_trendy_names <- plotly::renderPlotly(plot_trends())
}

Exemplos de Render Functions

renderTable() + pacote DT

server <- function(input, output){
  output$babynames_table <- DT::renderDT({
    babynames %>% 
      dplyr::slice_sample(prop = .1) %>% 
      DT::datatable()
  })
}

Tipos de Layout e Temas

Layout

Como é na UI que alteramos as saídas do app, as alterações de layout também estarão na UI;

Basicamente, todo app vai se dividir em duas partes:

titlePanel() - título do aplicativo;
siderbarLayout() - esse recebe os comandos para posicionamentos de inputs e os espaços para os outputs.

Abordando o sidebarLayout()

library(shiny)

inputPanel(
  titlePanel("Baby Name Explorer"),
  sidebarLayout(
    sidebarPanel(
      textInput('name', 'Enter Name', 'David')),
    mainPanel(  
      plotOutput('trend')))
)

Baby Name Explorer

Shiny applications not supported in static R Markdown documents

Dashboard

Uma das formas de se criar dashboards utilizando as funcionalidades do Shiny é utilizando o pacote shinydashboard

library(shinydashboard)

header <- dashboardHeader(title = "My first dashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output){

shinyApp(ui, server)

Dashboard

Mudando parâmetros no header

# Definindo novos parâmetros no header
header <- dashboardHeader(title = "My first dashboard",
                          titleWidth = 300,
                          dropdownMenu(type = "messages"),
                          dropdownMenu(type = "notifications")
                          
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

Mudando parâmetros na sidebar

# Definindo a sidebar e seus parâmetros
sidebar <- dashboardSidebar(width = 300,
                            sidebarMenu(
                              id = "pages",
                              menuItem("Many charts", tabName = "charts",
                                       icon = icon("chart-line")),
                              menuItem("Statistics", tabName = "stats",
                                       icon = icon("file-excel"))
                            ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

É possível adicionar subtabs na sidebar

# Adicionando subtabs na sidebar
sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts",
             icon = icon("chart-line")),
    menuItem("Statistics", tabName = "stats",
             icon = icon("file-excel"),
             menuSubItem("Team 1", tabName = "team1",
                         icon = icon("user")))
    ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}
shinyApp(ui, server)

Dashboard

Assim como adicionar inputs

# Adicionando inputs na sidebar

sidebar <- dashboardSidebar(width = 300,
                            sidebarMenu(
   id = "pages",
   menuItem("Many charts", tabName = "charts",
            icon = icon("chart-line")),
   menuItem("A couple of checkboxes",
            checkboxGroupInput("checkboxes",
                               "Days of the week",
            choices = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")))
                            ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

Uma das formas de se criar dashboards utilizando as funcionalidades do Shiny é utilizando o pacote shinydashboard

library(shinydashboard)

header <- dashboardHeader(title = "My first dashboard")

sidebar <- dashboardSidebar()

body <- dashboardBody()

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output){

shinyApp(ui, server)

Dashboard

Mudando parâmetros no header

# Definindo novos parâmetros no header
header <- dashboardHeader(title = "My first dashboard",
                          titleWidth = 300,
                          dropdownMenu(type = "messages"),
                          dropdownMenu(type = "notifications")
                          
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

Mudando parâmetros na sidebar

# Definindo a sidebar e seus parâmetros
sidebar <- dashboardSidebar(width = 300,
                            sidebarMenu(
                              id = "pages",
                              menuItem("Many charts", tabName = "charts",
                                       icon = icon("chart-line")),
                              menuItem("Statistics", tabName = "stats",
                                       icon = icon("file-excel"))
                            ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

É possível adicionar subtabs na sidebar

# Adicionando subtabs na sidebar
sidebar <- dashboardSidebar(
  width = 300,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts",
             icon = icon("chart-line")),
    menuItem("Statistics", tabName = "stats",
             icon = icon("file-excel"),
             menuSubItem("Team 1", tabName = "team1",
                         icon = icon("user")))
    ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}
shinyApp(ui, server)

Dashboard

Assim como adicionar inputs

# Adicionando inputs na sidebar

sidebar <- dashboardSidebar(width = 300,
                            sidebarMenu(
   id = "pages",
   menuItem("Many charts", tabName = "charts",
            icon = icon("chart-line")),
   menuItem("A couple of checkboxes",
            checkboxGroupInput("checkboxes",
                               "Days of the week",
            choices = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")))
                            ))

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Dashboard

Por fim é possível desativar a sidebar

# Desativando a sidebar

sidebar <- dashboardSidebar(disable = TRUE)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
}

shinyApp(ui, server)

Programação Reativa

O que é reatividade?

Resumidamente, reatividade em programação é o conceito que torna possível a interação dinâmcica do usuário com o programa, no qual o que é efetivamente executado e exibido se baseia no acompanhamento das mudanças de determinados valores. Por exemplo, se um determinado input muda, um novo cálculo deve ser executado e um novo output gerado.

Programação Reativa

Como funciona a reatividade em apps Shiny?

A reatividade se baseia em uma paradigma diferente de programção, chamado de declarativo. No Shiny, declaramos dentro da função server() quando e quais códigos devem ser executados a depender de cada nova situação. Podemos representar as relações de dependência entre input e output e os consequentes fluxos de execução nesses casos através de um diagrama de reatividade.

Programação Reativa

Diagrama de Reatividade

exemplo:

# ui
ui <- fluidPage(
  selectInput(
    inputId = "variavel_A",
    label = "Variável A",
    choices = variaveis
  ),
  plotOutput(outputId = "histograma_A"),
  selectInput(
    inputId = "variavel_B",
    label = "Variável B",
    choices = variaveis,
    selected = variaveis[2],
  ),
  plotOutput(outputId = "histograma_B")
)

Programação Reativa

Diagrama de Reatividade

# server
server <- function(input, output, session) {
  output$histograma_A <- renderPlot({
    print("Gerando histograma A...")
    hist(mtcars[[input$variavel_A]], main = "Histograma A")
  })
  output$histograma_B <- renderPlot({
    print("Gerando histograma B...")
    hist(mtcars[[input$variavel_B]], main = "Histograma B")
  })
}

# app
shinyApp(ui, server)